<template>
  <div class="list">
    <a href="#" class="item" v-for="{front_cover,music_count,title} in albums" :key="title">
      <div class="cover_bg"></div>
      <div 
        v-lazy:background-image="front_cover" 
        class="lazy_image">
        <div class="sound_num">
          <span>{{music_count}}</span>
        </div>
      </div>
      <div class="title">{{title}}</div>
    </a>
  </div>
</template>

<script>
import Vue from 'vue';
import { Lazyload } from 'vant';
import { getTagAlbum } from '../api/index';

Vue.use(Lazyload);
export default {
  data:function(){
    return {
      albums:[]
    }
  },
  async mounted(){
    const {albums} = await getTagAlbum();
    this.albums = albums;
    // console.log(this.albums);
  }
}
</script>

<style lang="scss" scoped>
.list{
  width:100%;
  height:31rem;
  padding-top:0.1rem;
  margin:0 0.14rem;
  flex-wrap: wrap;
  min-height: 3.2rem;
  display: flex;
  justify-content: space-around;
  align-items:center;
  .item{
    width:1.635rem;
    height:1.915rem;
    margin-bottom:0.1rem;
    display: block;
    position:relative;
    .cover_bg{
      width:1.635rem;
      height:1.635rem;
      padding-bottom:1.635rem;
      display: block;
      position: absolute;
      width: 100%;
      padding-bottom: 100%;
      background: url("http://static.missevan.com/assets/m/images/build/album-cover.efe70663.png") no-repeat;
      background-size: contain;
      }
    .lazy_image{
      width:1.455rem;
      height:1.455rem;
      overflow: visible;
      background-color: #e0e0e0;
      position: relative;
      border-radius: 0.04rem;
      background-repeat: no-repeat;
      background-position: 50%;
      background-size: 100%;
      .sound_num{
        width:1.455rem;
        height:0.36rem;
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: 0 0 4px 4px;
        span{
          height:0.24rem;
          display: block;
          position: absolute;
          right: 0.05rem;
          padding-left: 0.14rem;
          font-size: 0.12rem;
          color: #fff;
          bottom: 0;
          text-shadow: 0.5px 0 1px #000;
        }
        ::before{
          content: "";
          display: block;
          position: absolute;
          margin: 0.04rem 0 0.03rem;
          left: 0;
          height: 0.11rem;
          width: 0.13rem;
          background-image: url("http://static.missevan.com/assets/m/images/build/sprite-icons-thumbnails@2x.8e0a6b22.png");
          background-position: 0 -0.44rem;
          background-size: 0.56rem 0.55rem;
        }
      }
    }
    .title{
      width:1.635rem;
      height:0.4rem;
      color: #616161;
      font-size: 0.13rem;
      margin-top:0.06rem;
      word-break: break-all;
      text-overflow: ellipsis;
      overflow: hidden;
      line-height: 0.2rem;
      margin: 0;
      white-space: normal;
    }
  }
}
</style>